<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    
    <style type="text/css">
        
        h1{
            text-align: center;
            margin-top:2%;
            margin-bottom: 2%;
            color: white;
        }

        .rulestxt{
            color:white;
            background-color: transparent;
            resize:none;
            width: 100vw;
            height: 90vh;
            -webkit-user-select: none;
            -moz-user-select: none;   
            border:0px;
        }   
        
        .accitem{
            width:100vw;
            height: 15vh;
        }
        
        .acclist{
            max-height:100%;
        }
        
        @media screen and (orientation:portrait) {  
            .wrapper{
                color:white;
                margin-top: 5%;
            }
            #top{
                content:url(img/rules/01_portrait.png)
            }
            #homebase{
                content:url(img/rules/02_portrait.png)
            }
            #points{
                content:url(img/rules/03_portrait.png)
            }
            #territory{
                content:url(img/rules/04_portrait.png)
            }
            #attack{
                content:url(img/rules/05_portrait.png)
            }
            .acclist{
                font-size: 20px;
            }
        }

        @media screen and (orientation:landscape) {   

            .wrapper{
                color:white;
                margin-top: 5%;
            }
            
            #top{
                content:url(img/rules/01.png)
            }
            #homebase{
                content:url(img/rules/02.png)
            }
            #points{
                content:url(img/rules/03.png)
            }
            #territory{
                content:url(img/rules/04.png)
            }
            #attack{
                content:url(img/rules/05.png)
            }
            .acclist{
                font-size: 25px;
            }
        }

    </style>
    
</head>    
    
<body>
    <img class='accitem' alt='header' id='top'/>
    <div class="wrapper">
        <div id='accordion' class='rulestxt'>
            <img class='accitem' alt='homebase' id='homebase'/>
                <ul class='acclist'>
                    <li>Every player starts with a home base.</li>
                    <li>Every player starts with 5 points on his first home base.</li>
                    <li>The player has to be physically on location to make changes to his territory. </li>
                    <li>Every home base can capture a maximum of 30 hexagons.</li>
                    <li>If the player loses his home base he loses every tile that was part of that home base. </li>
                    <li>A player can only restart the game if he has lost all of his tiles. </li>
                </ul>
            <img class='accitem' alt='points' id='points'/>
                <ul class='acclist'>
                    <li>Every player earns 2 points per day for his home base if he logs in.</li>
                    <li>A player can only move points to surrounding tiles. </li>
                </ul>
            <img class='accitem' alt='territory' id='territory'/>
                <ul class='acclist'>
                    <li>A hexagon can have a minimum of 1 point appointed to it (also counts for attacks). </li>
                    <li>A hexagon can have a maximum of 10 points appointed to it. </li>
                </ul>
            <img class='accitem' alt='attack' id='attack'/>
                <ul class='acclist'>
                    <li>The player has to be physically on location to engage in an attack. </li>
                    <li>A roll of the dice decides who wins an attack.</li>
                    <li>The attacking player takes over the tile if he wins.  </li>
                    <li>The attacking player loses all of the points, except for the one needed to maintain ownership, of the attacking hexagon if he loses. </li>
                    <li>Both parties lose a point if the rolling of the dice results in a tie.  </li>
                </ul>
        </div>
    </div>

<script>
    $(function() {
    $( "#accordion" ).accordion({
        header:"img",
        collapsible: true,
        active:false
    });
  });
</script>
</body>
</html>
